import React, {useEffect, useState} from "react";
import {Dimensions, ImageBackground, StyleSheet, Text, TouchableHighlight, View} from "react-native";
import LoginBG from './Asset/LoginBG.png'
import {SvgXml} from "react-native-svg";
import {createSvgXml, importSvgXml, rightSvgXml} from "../libs/svgXml";
import {fontSize_12, fontSize_15, fontSize_16, fontSize_20, fontSize_25} from "./theme";

const {width,height,scale} = Dimensions.get("window");

const L2_Login = ({navigation}:any) => {
    const [LoginWay, setLoginWay] = useState([
        {
            title:"我有钱包",
            content:"导入钱包",
            leftSvg:importSvgXml,
            onPress:()=>{
                navigation.navigate("L2_AddNet",{createWallet:false});
            },
        },
        {
            title:"我没有钱包",
            content:"创建钱包",
            leftSvg:createSvgXml,
            onPress:()=>{
                navigation.navigate("L2_AddNet",{createWallet:true});
            },
        },

    ]);
    useEffect(()=>{
        return ()=> {
        }
    },[])
    return (
        <ImageBackground source={LoginBG} style={styles.container}>
            <View style={{flex:1}}>
                <Text style={{fontSize:fontSize_20,color:"white",marginTop:70,fontWeight:"bold"}}>
                    多链钱包，资产自我掌控
                </Text>
            </View>
            <View style={styles.mainContainer}>
                    <Text style={styles.mainTitle}>数字资产钱包</Text>
                    <Text style={styles.smallTitle}>支持BTC、ETH、BEC、SmartX_L2等主流公链</Text>
                    {
                        LoginWay.map((item,index)=>{
                            return (
                                <TouchableHighlight underlayColor={"transparent"} onPress={item.onPress} key={index+"_MineList"}>
                                    <View style={styles.pageView}>
                                        <SvgXml xml={item.leftSvg} width={35} height={35} style={{borderBottomWidth:1,borderBottomColor:"transparent"}}/>
                                        <View style={{flex:1,height:70,marginLeft:10,alignItems:"center",flexDirection:"row",borderBottomColor:"#f5f5f5",borderBottomWidth:1}}>
                                            <View style={{flex:1,flexDirection:"column",alignItems:"flex-start"}}>
                                                <Text style={{fontSize:fontSize_16,lineHeight:25}}>{item.title}</Text>
                                                <Text style={{fontSize:fontSize_12,color:"#9fa1a6",lineHeight:25}}>{item.content}</Text>
                                            </View>
                                            <SvgXml xml={rightSvgXml()} width={20} height={20}/>
                                        </View>
                                    </View>
                                </TouchableHighlight>
                            )
                        })
                    }
                </View>
        </ImageBackground>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        width: width,
        height:"100%",
        alignItems: "center",
        flexDirection: "column",
        paddingLeft: 10,
        paddingRight: 10,
        backgroundColor: "white"
    },
    mainContainer:{
        width:width,
        height:height*2.2/4,
        backgroundColor:"white",
        borderTopRightRadius:10,
        borderTopLeftRadius:10,
        padding:25,
        flexDirection:"column",
        alignItems:"flex-start"
    },
    mainTitle:{
        fontSize:fontSize_25,
        fontWeight:"bold",
    },
    smallTitle:{
        fontSize:fontSize_15,
        color:"#9fa1a6",
        lineHeight:fontSize_15*2,
        marginBottom:10
    },
    pageView:{
        width:"100%",
        // height:55,
        backgroundColor:"white",
        flexDirection:"row",
        alignItems:"center",
        // padding:25,
        // paddingTop:0,
        // paddingBottom:0,
        alignSelf:"center"

    },
})
export default L2_Login;


